<template>
    <div class="add-movie-container">
      <button @click="goBack" class="back-button">← 返回电影列表</button>
      <h1 class="page-title">增添电影</h1>
      <form @submit.prevent="submitMovie" class="movie-form">
        <div class="form-group">
          <label for="title">电影标题:</label>
          <input type="text" id="title" v-model="movie.title" required />
        </div>
  
        <div class="form-group">
          <label for="description">电影简介:</label>
          <textarea id="description" v-model="movie.description" rows="5" required></textarea>
        </div>
  
        <div class="form-group">
          <label for="actors">演员:</label>
          <input type="text" id="actors" v-model="movie.actors" required maxlength="25" />
          <small class="help-text">演员名称长度不能超过25个字。</small>
        </div>
  
        <div class="form-group">
          <label for="imageUrl">封面链接 (picPaths):</label>
          <input type="url" id="imageUrl" v-model="movie.imageUrl" required />
        </div>
  
        <div class="form-group">
          <label for="playUrl">视频链接 (playUrl):</label>
          <input type="url" id="playUrl" v-model="movie.playUrl" required />
        </div>

        <button type="submit" class="submit-button">提交电影</button>
      </form>
  
      <p v-if="message" :class="{'success-message': success, 'error-message': !success}">{{ message }}</p>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  
  export default defineComponent({
    name: 'AddMovieView',
    setup() {
      const router = useRouter();
      const movie = ref({
        title: '',
        description: '',
        actors: '',
        imageUrl: '',
        playUrl: '',
      });
      const message = ref<string | null>(null);
      const success = ref(false);
  
      const submitMovie = async () => {
        message.value = null;
        try {
          const response = await axios.post('/api/demo/additem', {
            title: movie.value.title,
            desc: movie.value.description,
            actors: movie.value.actors,
            picPaths: movie.value.imageUrl,
            playUrl: movie.value.playUrl,
            typeIndex: 3, // 固定值
          });
  
          if (response.data && response.data.id) {
            message.value = '电影添加成功！';
            success.value = true;
            // 清空表单
            movie.value = {
              title: '',
              description: '',
              actors: '',
              imageUrl: '',
              playUrl: '',
            };
          } else {
            // 检查后端返回的错误信息，特别是重复标题的错误
            if (response.data && response.data.message && response.data.message.includes('Duplicate entry') && response.data.message.includes('title_UNIQUE')) {
              message.value = `电影添加失败：标题 "${movie.value.title}" 已存在。`;
            } else {
              message.value = response.data.message || '电影添加失败。';
            }
            success.value = false;
          }
        } catch (err: any) {
          console.error('提交电影失败:', err);
          // 进一步处理axios错误响应
          if (err.response && err.response.data && err.response.data.message) {
            if (err.response.data.message.includes('Duplicate entry') && err.response.data.message.includes('title_UNIQUE')) {
              message.value = `电影添加失败：标题 "${movie.value.title}" 已存在。`;
            } else if (err.response.data.message.includes('Data too long') && err.response.data.message.includes('actors')) {
              message.value = '电影添加失败：演员名称过长。';
            } else {
              message.value = `提交电影时发生错误：${err.response.data.message}。`;
            }
          } else {
            message.value = '提交电影时发生未知错误。请稍后再试。';
          }
          success.value = false;
        }
      };
  
      const goBack = () => {
        router.push('/movies');
      };
  
      return {
        movie,
        message,
        success,
        submitMovie,
        goBack,
      };
    },
  });
  </script>
  
  <style scoped>
  .add-movie-container {
    padding: 25px;
    max-width: 700px;
    margin: 30px auto;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  
  .back-button {
    position: absolute;
    top: 25px;
    left: 25px;
    padding: 10px 15px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .back-button:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
  }
  
  .page-title {
    font-size: 2.5em;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .movie-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: #42b983;
    box-shadow: 0 0 8px rgba(66, 185, 131, 0.2);
    outline: none;
  }
  
  .submit-button {
    padding: 15px 25px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .submit-button:hover {
    background-color: #369f75;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  .submit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  }
  
  .success-message {
    color: #28a745;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
  }
  
  .error-message {
    color: #dc3545;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
  }
  .help-text {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
  }
  </style>